<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commonjsp/jstl.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>待办工单</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="${prefix}/stylesheets/theme.css">
<link rel="stylesheet" type="text/css" href="${prefix}/stylesheets/reveal.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/jqueryui/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/jqueryui/jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/jqueryui/jquery-ui.theme.css">

<script src="${prefix}/lib/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="${prefix}/lib/ajaxfileupload.js" type="text/javascript"></script>
<script src="${prefix}/lib/jquery-form.js" type="text/javascript"></script>
<script src="${prefix}/lib/jquery.reveal.js" type="text/javascript"></script>
<script src="${prefix}/lib/jqueryui/jquery-ui.js" type="text/javascript"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	<script src="${prefix}/javascripts/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="${prefix}/lib/font-awesome/docs/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<script type="text/javascript">
$(document).ready(function () {
	//=====页面准备好以后，查询该操作者可以进行操作的店面和公司信息
	queryCompanyAndStoreSelect();
	
	//当店面选择发生变化时
	$("#companyandstoreid").change(function() {
		$("#search_orderMode").val("");
		$("#search_orderStatus").val("");
		$("#search_waiter").val("");
		$("#search_roomNo").val("");
		preQueryTaskOrderByStoreid();
	});
	
	//准备工单详情的弹出框
	$("#orderinfoDetails").dialog({
		resizable: false,
		height: 460,
		width: 420,
		modal: true,
		autoOpen: false,
		show: {
		  effect: "blind",
		  duration: 300
		},
		hide: {
		  effect: "explode",
		  duration: 300
		}
	});
});

//查询该操作者可以进行操作的店面和公司信息
function queryCompanyAndStoreSelect() {
	$.ajax({
		type: "post", 
		async: false, 
		url: "${prefix}/company/queryCompanyAndStoreList", 
		success: function(data) { 
			var jsonData = eval('(' + data + ')');
			var listDatas = jsonData.data;
			var optionhtml = ""; 
			for(var index = 0 ; listDatas != null && index < listDatas.length ; index++) { 
				var optionItem = listDatas[index]; 
				
				optionhtml += "<optgroup id=\"" + optionItem.companyuid + "\" label=\"" + optionItem.companyName + "\" style=\"color: #FF00FF;margin: 8px\"></optgroup>";
				var stores = optionItem.stores;
				for(var sum = 0 ; stores != null && sum < stores.length ; sum++) {
					var storeItem = stores[sum];
					optionhtml += "<option style=\"margin: 5px\" companyid=\"" + optionItem.companyuid + "\" value=\"" + storeItem.storeuid + "\"";
					if(index == 0 && sum == 0) {
						optionhtml += " selected ";
					}
					optionhtml += ">" + storeItem.storeName + "</option>";
				}
			}
			
			$("#companyandstoreid").html(optionhtml);
			preQueryTaskOrderByStoreid();
		}
	});
}

//查询指定的店面待办工单，所谓待办工单，既是状态为1（抢单中）、2（已派单）的
function preQueryTaskOrderByStoreid() {
	storeid = $("#companyandstoreid").val();
	data = "storeid=" + storeid;
	//可能的查询条件
	var orderMode = $.trim($("#search_orderMode").val());
	var orderStatus = $.trim($("#search_orderStatus").val());
	var waiterCode = $.trim($("#search_waiter").val());
	var roomNo = $.trim($("#search_roomNo").val());
	if(orderMode != ""){
		data += "&orderMode=" + orderMode;
	}
	if(orderStatus != ""){
		data += "&orderStatus=" + orderStatus;
	}
	if(waiterCode != ""){
		data += "&waiterCode=" + waiterCode;
	}
	if(roomNo != ""){
		data += "&roomNo=" + roomNo;
	}
	
	$.ajax({
		type: "post",
		async: true,
		 dataType: "json",
		url: "${prefix}/order/queryTaskOrder",
		data: data,
		success: function(jsonData) {
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			reviewTables(jsonData.data)
		}
	});
}

//当收到表格数据后，由这个方法进行表格重绘
function reviewTables(jsonobjects) {
	$("#usertablebodyDiv").html("");
	var htmlbody = "";
	for(var index = 0 ; jsonobjects != null && index < jsonobjects.length ; index++) {
		var orderinfoItem = jsonobjects[index];
		htmlbody += "<tr>";
		htmlbody += "<td>" + orderinfoItem.roomNo + "</td>";
		//单据类型
		htmlbody += "<td>" + orderinfoItem.orderType.orderTypeName + "</td>";
		//派单方式
		if(orderinfoItem.orderMode == 1) {
			htmlbody += "<td>抢单模式</td>";
		} else {
			htmlbody += "<td>指派模式</td>";
		}
		//单据状态
		if(orderinfoItem.orderStatus == 1) {
			htmlbody += "<td>抢单单中</td>";
		} else if(orderinfoItem.orderStatus == 2) {
			htmlbody += "<td>已派单</td>";
		}
		//标准积分
		htmlbody += "<td>" + orderinfoItem.integral + "</td>";
		//服务员
		if(orderinfoItem.waiter != null) {
			waiter = orderinfoItem.waiter;
			htmlbody += "<td>" + waiter.realName + "[" + waiter.workNumber + "]" + "</td>";
		} else {
			htmlbody += "<td>&nbsp;</td>";
		}
		//建单时间
		var createTime = orderinfoItem.createTime;
		htmlbody += "<td>" + createTime.split(" ")[1] + "</td>";
		//功能
		htmlbody += "<td style=\"width: 120px\">";
		htmlbody += "<a href=\"javascript:void(0);\" onclick=\"withdrawOrderInfo('" + orderinfoItem.uid + "')\" style=\"margin-right: 10px ;\">撤回</a>";
		htmlbody += "<!-- a href=\"javascript:void(0);\" onclick=\"modifywOrderInfo('" + orderinfoItem.uid + "','" + orderinfoItem.orderType.orderCode + "')\">修改</a -->";
		htmlbody += "<a href=\"javascript:void(0);\" onclick=\"viewOrderInfo('" + orderinfoItem.uid + "')\">详情</a>";
		htmlbody += "</td>";
		htmlbody += "</tr>";
	}
	
	$("#orderinfoTBodyDiv").html(htmlbody);
}

//撤回指定的工单
function withdrawOrderInfo(orderinfoid) {
	$.ajax({
		type: "post",
		async: true,
		 dataType: "json",
		url: "${prefix}/order/withdrawOrderInfo?orderinfoid=" + orderinfoid,
		data: data,
		success: function(jsonData) {
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			//撤回完成后，重新查询“待办”工单
			preQueryTaskOrderByStoreid();
		}
	});
}

//修改订单的基本信息。修改规则如下：
//1、消费单可以修改商品信息（其余都不能修改）
//2、其他服务单，可以修改工单任务说明（企业都不能修改）
function modifyOrderInfo(orderinfoid , ordertypeCode) {
	//2015-05-02 截止这个时间点，我们只提供了工单撤回。没有工单修改。
	//这种情况下，如果录入错误，那么需要撤销这个工单，然后重新进行创建、抢单过程。这显然不是最科学的。
}

//查看一个工单的详情
function viewOrderInfo(orderinfoid) {
	$.ajax({
		type: "post",
		async: false,
		dataType: "json",
		url: "${prefix}/order/queryOrderinfoDetails?orderinfoid=" + orderinfoid,
		success: function(jsonData) {
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			var orderinfo = jsonData.data;
			//显示弹出框
			$("#orderinfoDetails").dialog("open");
			
			//赋值
			//当前状态
			if(orderinfo.orderStatus == 1) {
				$("#orderStatus").html("正在抢单");
			} else if(orderinfo.orderStatus == 2){
				$("#orderStatus").html("已派单");
			} else if(orderinfo.orderStatus == 3){
				$("#orderStatus").html("已完成服务");
			} else if(orderinfo.orderStatus == 4){
				$("#orderStatus").html("已结算");
			}
			//门牌号
			$("#roomNo").html(orderinfo.roomNo);
			$("#orderType").html(orderinfo.orderType.orderTypeName + "[" + orderinfo.orderType.orderCode + "]")
			$("#duration").html(orderinfo.duration);
			$("#integral").html(orderinfo.integral);
			//确定工单指派单模式
			if(orderinfo.orderMode == 1) {
				$("#fenpeiType").html("抢单模式");
				qiangdanModuleDivHTML = "<label>可抢单组：";
				var groups = orderinfo.groups;
				for(var index = 0 ; index < groups.length ; index++) {
					var groupItem = groups[index];
					qiangdanModuleDivHTML += "<font style=\"margin-right: 10px\">" + groupItem.groupName + "</font>";
				}
				qiangdanModuleDivHTML += "</label>";
				$("#qiangdanModuleDiv").html(qiangdanModuleDivHTML);
				$("#qiangdanModuleDiv").css("display","");
			} else {
				$("#fenpeiType").html("分配模式");
				$("#qiangdanModuleDiv").css("display","none");
			}
			//服务员工
			if(orderinfo.waiter == null) {
				$("#zhipaiModule_userCode").html("未指定/未指派");
				$("#zhipaiModule_userCode").css("color","#FF1122");
			} else {
				$("#zhipaiModule_userCode").html(orderinfo.waiter.realName + "[" + orderinfo.waiter.workNumber + "]");
				$("#zhipaiModule_userCode").css("color","");
			}
			
			//商品信息
			if(orderinfo.orderType.orderCode == '0001') {
				$("#commodityDetailsDiv").css("display","");
				var commodityMappings = orderinfo.commoditys;
				var html = "";
				for(var index = 0 ; commodityMappings != null && index < commodityMappings.length ; index++) {
					var commodityM = commodityMappings[index];
					html += "<tr>";
					html += "<td>" + commodityM.commodify.commodityName + "[" + commodityM.commodify.sortName + "]</td>";
					html += "<td>" + commodityM.commodifyNumber + "</td>";
					html += "</tr>";
				}
				$("#commodityDetailsTbody").html(html);
				$("#remarkDetailsDiv").css("display","none");
			} 
			//非“消费单”模式
			else {
				$("#commodityDetailsDiv").css("display","none");
				$("#remarkDetailsDiv").css("display","");
				$("#remark").val(orderinfo.remark);
			} 
		}
	});
}
</script>

<!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> 
<body>
<!--<![endif]-->

<div class="navbar">
	<%@ include file="/commonjsp/userbar.jsp"%>
</div>

<div class="container-fluid">
	<div class="row-fluid">
		<%@ include file="/commonjsp/mainmenu.jsp"%>
		<!-- 列表 -->
		<div class="span9">
			<!-- 列表头 -->
			<h1 class="page-title">待办工单</h1>
			
			<!-- 店面列表 -->
			<div class="well" style="width: 160px;height: 480px; float: left; margin-right:10px ; padding: 10px">
				<input type="hidden" name="admin_name" id="admin_name" value="${admin.userName }"/>
				<input type="hidden" name="admin_level" id="admin_level" value="${admin.adminLevel }"/>
				<input type="hidden" name="admin_companyid" id="admin_companyid" value="${admin.company.uid }"/>
				<input type="hidden" name="admin_storeid" id="admin_storeid" value="${admin.storefront.uid }"/>
				<select style="width: 100% ; height: 100% ; border: 0px" multiple="multiple" id="companyandstoreid" name="companyandstoreid">
					
				</select>
			</div>
			
			<div class="well" style="float: left; min-width: 900px; margin-bottom: 5px ; padding-bottom: 10px">
				<label style="padding-right: 10px;float: left; ">派单模式：
					<select id="search_orderMode" style="width: 120px; height: 30px">
						<option value=""> -- 请选择 --  </option>
						<option value="1"> 抢单模式 </option>
						<option value="2"> 指派模式 </option>
					</select>
				</label>
				<label style="padding-right: 10px">工单状态：
					<select id="search_orderStatus" style="width: 120px; height: 30px">
						<option value=""> -- 请选择 --  </option>
						<option value="1"> 抢单中 </option>
						<option value="2"> 已派单 </option>
					</select>
				</label>
				<label style="float: left; padding-right: 10px">
					办理人工号：<input id="search_waiter" type="text" value="" maxlength="10" style="width: 120px; height: 30px"/>
				</label>
				<label style="float: left; padding-right: 10px">
					房间号：<input id="search_roomNo" type="text" value="" maxlength="10" style="width: 120px; height: 30px"/>
				</label>
				<label style="float: left; padding-right: 10px">
					<a id="savebutton" onclick="preQueryTaskOrderByStoreid()" class="btn btn-primary"><i class="icon-save"></i> Search</a>
				</label>
			</div>
			
			<!-- 列表正文 -->
			<div class="well" style="float: left; min-width: 900px; margin-top: 5px">
				<table class="table">
					<thead>
						<tr>
							<th>编号-房号</th>
							<th>类型</th> 
							<th>工单模式</th>
							<th>当前状态</th>
							<th>工单积分</th>
							<th>办理人</th>
							<th>创建时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="orderinfoTBodyDiv">
						
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	<!-- Le javascript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="${prefix}/lib/bootstrap/js/bootstrap.js"></script>
	
	<!-- 工单详情 -->	
	<div id="orderinfoDetails">
		<label>当前状态：
			<font id="orderStatus" style="font-size: 18;font-weight: bold;color: #FF00FF"></font>
		</label>
		<label>房间号：
			<font id="roomNo"></font>
		</label>
		<label>工单类型（请输入类型编号）：
			<font id="orderType"></font>
		</label>
		<label>标准服务时间(秒)：
		<font id="duration"></font>
		</label>
		<label>工单积分：
		<font id="integral"></font>
		</label>
		<label>
		工单分配方式：
		<font id="fenpeiType"></font>
		</label>
		
		<!-- 抢单模式 -->
		<div id="qiangdanModuleDiv">
			
		</div>
		<!-- 分配模式 -->
		<div id="zhipaiModuleDiv">
			<label>服务员工：
			<font id="zhipaiModule_userCode"></font> 
			</label>
		</div>
		
		<!-- 商品信息 -->
		<div id="commodityDetailsDiv" style="display:none">
			<table class="table">
				<thead>
				<tr>
					<th>商品名称</th>
					<th>商品数量</th>
				</tr>
				</thead>
				<tbody id="commodityDetailsTbody">
					
				</tbody>
			</table>
		</div>
		
		<!-- 任务说明 -->
		<div id="remarkDetailsDiv">
		<label>任务说明：</label>
		<textarea style="width: 320px;height: 160px" id="remark" readonly="readonly"></textarea>
		</div>
	</div>
</div>
</body>
</html>